<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 添加分类按钮区域 -->
      <el-row>
        <el-col>
          <el-button type="primary" @click="showCateEditDialog()">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 分类表格  -->
      <vxe-table border :tree-config="treeConfig" :data="cateList" :row-config="{ keyField: 'cat_id' }">
        <vxe-column width="70" align="center" title="排序" header-align="center">
          <template #default="scope">
            <template v-if="scope.row.cat_level === 0">
              {{ scope.$rowIndex + 1 }}
            </template>
          </template>
        </vxe-column>
        <!-- 此列为展开折叠列 -->
        <vxe-column field="cat_name" title="分类名称" tree-node></vxe-column>
        <vxe-column field="cat_deleted" title="是否有效">
          <template #default="scope">
            <el-icon v-if="scope.row.cat_deleted === false" color="green">
              <SuccessFilled />
            </el-icon>
            <el-icon v-else color="red">
              <CircleCloseFilled />
            </el-icon>
          </template>
        </vxe-column>
        <vxe-column field="cat_level" title="排序">
          <template #default="scope">
            <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
            <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
            <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
          </template>
        </vxe-column>
        <vxe-column title="操作">
          <template #default="{ row }">
            <el-button size="small" type="primary" :icon="Edit" @click="showCateEditDialog(row.cat_id)"></el-button>
            <el-button size="small" type="danger" :icon="Delete" @click="deleteRole(row.cat_id)"></el-button>
          </template>
        </vxe-column>
      </vxe-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        v-model:current-page="pageParams.pagenum"
        :page-sizes="pageSizes"
        v-model:page-size="pageParams.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 编辑分类 -->
    <cate-edit ref="cateEditRef" @getCateList="getCateList"></cate-edit>
  </div>
</template>

<script setup>
import { VxeTable, VxeColumn, VxeUI } from 'vxe-table'
import { getCateListApi } from '@/api/cate'
import { ref, reactive } from 'vue'
import { Edit, Delete, SuccessFilled, CircleCloseFilled } from '@element-plus/icons-vue'
import CateEdit from './components/CateEdit.vue'

// 分页大小
const pageSizes = ref([5, 10, 15, 20])
// 定义分页查询参数
const pageParams = ref({
  type: 3,
  pagenum: 1,
  pagesize: pageSizes.value[0]
})

// 获取分类列表数据
const cateList = ref([])
const total = ref(0)
const getCateList = async () => {
  const data = await getCateListApi(pageParams.value)
  cateList.value = data.result
  total.value = data.total
}
getCateList()

// 监听分页参数的变化
// 每页显示的条数发生改变时触发
const handleSizeChange = size => {
  pageParams.value.pagesize = size
  getCateList()
}
// 当前页码改变时触发
const handleCurrentChange = page => {
  pageParams.value.pagenum = page
  getCateList()
}

// 树形配置
const treeConfig = reactive({
  // 以下3个配置选项只有当返回的数据是列表数据时，才需要配置
  // rowField: 'cat_id',  // 唯一标识
  //  parentField: 'cat_pid' // 父级字段名
  // childrenField: 'children', // 层级关系字段
  // 使用官方vxe-pc-ui里面的图标，需要安装及导入样式
  iconOpen: 'vxe-icon-square-minus',
  iconClose: 'vxe-icon-square-plus'
  // 可以使用iconfont的图标库来自定义
  // iconOpen: 'iconfont icon-caozuo-zhedie ',
  // iconClose: 'iconfont icon-unfolded-s'
})

// 打开添加或者修改的对话框
const cateEditRef = ref(null)
const showCateEditDialog = id => {
  cateEditRef.value.open(id)
}
</script>

<style lang="scss" scoped>
.vxe-table {
  margin-top: 15px;
}
</style>